<template>
  <view style="padding-top: 20px ;padding-left: 10px;padding-right: 10px">
    <uni-segmented-control
      :current="data.current"
      :values="data.items"
      :style-type="data.styleType"
      :active-color="data.activeColor"
      @clickItem="onClickItem"
    />
    <view v-if="data.current === 0">
      <uni-list>
        <uni-list-item
          link
          @click="onClickCourseItem(item)"
          :thumb="item.avatar"
          v-for="item in data.lista"
          :title="item.docEntry + '&nbsp;' + item.title"
          rightText="右侧文字"
        >
          <template v-slot:footer>
            <text v-if="item.docStatus === 'O'">未开始</text>
            <text v-if="item.docStatus === 'L'">进行中</text>
            <text v-if="item.docStatus === 'C'">已完成</text>
          </template>
        </uni-list-item>
      </uni-list>
    </view>
    <view v-if="data.current === 1">
      <uni-list>
        <uni-list-item
          link
          @click="onClickCourseItem(item)"
          :thumb="item.avatar"
          v-for="item in data.lista"
          :title="item.docEntry + '&nbsp;' + item.title"
          rightText="右侧文字"
        >
          <template v-slot:footer>
            <text v-if="item.docStatus === 'O'">未开始</text>
            <text v-if="item.docStatus === 'L'">进行中</text>
            <text v-if="item.docStatus === 'C'">已完成</text>
          </template>
        </uni-list-item>
      </uni-list>
    </view>
    <view v-if="data.current === 2">
      <uni-list>
        <uni-list-item
          link
          @click="onClickCourseItem(item)"
          :thumb="item.avatar"
          v-for="item in data.lista"
          :title="item.docEntry + '&nbsp;' + item.title"
          rightText="右侧文字"
        >
          <template v-slot:footer>
            <text v-if="item.docStatus === 'O'">未开始</text>
            <text v-if="item.docStatus === 'L'">进行中</text>
            <text v-if="item.docStatus === 'C'">已完成</text>
          </template>
        </uni-list-item>
      </uni-list>
    </view>
    <view v-if="data.current === 3">
      <uni-list>
        <uni-list-item
          link
          @click="onClickCourseItem(item)"
          :thumb="item.avatar"
          v-for="item in data.lista"
          :title="item.docEntry + '&nbsp;' + item.title"
          rightText="右侧文字"
        >
          <template v-slot:footer>
            <text v-if="item.docStatus === 'O'">未开始</text>
            <text v-if="item.docStatus === 'L'">进行中</text>
            <text v-if="item.docStatus === 'C'">已完成</text>
          </template>
        </uni-list-item>
      </uni-list>
    </view>
  </view>
</template>

<script setup>
  import { reactive, onMounted } from 'vue';
  import { courseApi } from '@/api/business/exam/course-api';
  import { onShow } from '@dcloudio/uni-app';

  const data = reactive({
    current: 0,
    items: ['全  部', '未开始', '进行中', '已完成'],
    styleType: 'button',
    activeColor: '#007aff',
    lista: [],
    queryForm: {
      pageNum: 1,
      pageSize: 100,
      docStatus: null,
    },
  });

  function queryList() {
    courseApi.myList(data.queryForm).then((res) => {
      data.lista = res.data;
    });
  }

  onShow(() => {
    queryList();
  });

  function onClickItem(e) {
    if (data.current !== e.currentIndex) {
      data.current = e.currentIndex;
    }
    if (e.currentIndex === 0) {
      data.queryForm.docStatus = 'O';
    } else if (e.currentIndex === 1) {
      data.queryForm.docStatus = 'L';
    } else if (e.currentIndex === 2) {
      data.queryForm.docStatus = 'C';
    } else if (e.currentIndex === 3) {
      data.queryForm.docStatus = null;
    }
    queryList();
  }

  function onClickCourseItem(item) {
    uni.navigateTo({ url: `/pages/course/coursea?docEntry=${item.docEntry}` });
  }
</script>

<style scoped></style>
